<template>
	<view>
		<view class="slot-content">
				<scroll-view scroll-y="true" class="slot-content-scroll">
					<view class="drop-item" v-for="(item,index) in 6" :key="index">
						<view class="title">距离</view>
						<view class="list u-flex u-flex-wrap">
							<view class="u-line-1 active">不限</view>
							<view class="u-line-1">附近1KM</view>
							<view class="u-line-1">附近2KM</view>
							<view class="u-line-1">附近3KM</view>
							<view class="u-line-1">附近4KM</view>
						</view>
					</view>
				</scroll-view>
				<view class="bottom-box u-flex">
					<view class="reset">
						<text class="iconfont icon-zhongzhi"></text>
						<view>重置</view>
					</view>
					<view class="btn">
						<u-button shape="circle" type="primary">确定</u-button>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"drop-price-select",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.slot-content{background-color: #fff;border-radius: 0 0 20rpx 20rpx;
		.slot-content-scroll{min-height: 300rpx;max-height: 600rpx;border-top: 1rpx solid #ccc;}
		.drop-item{padding: 30rpx;
			.title{font-size: 34rpx;font-weight: bold;}
			.list{
				view{background-color: #f4f4f4;height: 60rpx;border-radius: 14rpx;padding: 4rpx 10rpx;line-height: 52rpx;text-align: center;width: 23%;margin: 10rpx 1% 0;font-size: 26rpx;}
				.active{background-color: #fad6d7;color: $tc;}
			}
		}
		.bottom-box{
			border-top: 1rpx solid #ccc;height: 120rpx;
			.reset{
				margin: 0 30rpx 0 40rpx;text-align: center;
				.iconfont{font-weight: bold;}
			}
			.btn{flex: 1;padding-right: 40rpx;}
		}
	}
</style>
